<template>
  <div class="type_4-outer">
    <h3 v-if="title">{{title}}</h3>
    <ul class="flex" :style="outer_style()">
      <li class="flex" style="flex-direction: column;" v-for="row in list" :title="row.title">
        <div class="img"><img :src="row.head_img" :alt="row.title" draggable="false"></div>
        <div class="content max flex">
          <p class="max" style="text-align: center;">{{row.title}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "type_4",
  props: ['title','list','config','model_id','table_name','href'],
  data(){
    return {}
  },
  methods: {
    outer_style(){
      let res = {};
      if (this.config_data.background_color) res['background-color'] = this.config_data.background_color;
      if (this.config_data.color) res['color'] = this.config_data.color;
      return res;
    },
  },
  computed: {
    config_data(){
      try {
        return this.config ? JSON.parse(this.config) : {};
      } catch (e) {
        return {};
      }
    },
  },
  mounted(){
    let app = this;
    //渲染完成执行
  }
}
</script>

<style scoped>
.type_4-outer h3{padding: 2px 8px;}
.type_4-outer ul{flex-wrap: wrap;align-items: flex-start;}
.type_4-outer li{width: 25%;height: auto;position: relative;padding:  8px;}
.type_4-outer li>.img{width: 100%;height: auto;}
.type_4-outer li>.content{width: 100%;flex-direction: column;}
.type_4-outer li>.content>*{width: 100%;}
.type_4-outer li>.content .price{text-align: right;color: #ff9200;font-weight: bold;}
.type_4-outer li>.content .sales{text-align: right;color: #999;}
</style>